<template>
  <Container>
    <template v-slot:content>
      <div class="realTimeData">
        <div class="data" v-for="item, index in realTimeData" :key="index">
          <div class="dataImage">
            <img :src="item.dataImage" alt="">
          </div>
          <div class="dataList">
            <div class="info" v-for="data, dataIndex in item.dataList" :key="dataIndex">
              <div><span class="value">{{ data.value || 0 }}</span>{{ data.unit }}</div>
              <div class="label">{{ data.label }}</div>
              <div class="time">日期范围：{{ data.time }}</div>
            </div>
          </div>
        </div>
        <span class="noData" v-show="!realTimeData.length">暂无能源数据</span>
      </div>
      <div class="chart">
        <div class="pieChart">
          <div class="title">
            <div class="label">本月能耗情况分布</div>
            <div class="btnList">
              <EnumBtn @enumClick="enumClick_1"></EnumBtn>
            </div>
          </div>
          <div class="chartContent">
            <PieChart v-show="pieDataList.length" :dataList="pieDataList" :seriesName="pieSeriesName"></PieChart>
            <span class="noData" v-show="!pieDataList.length">暂无能耗数据</span>
          </div>
        </div>
        <div class="lineChart">
          <div class="title">
            <div class="label">能耗趋势分析</div>
            <div class="typeList">
              <span class="type" :class="type == item.type ? 'active_type' : 'type'" v-for="item, index in typeList"
                :key="index" @click="getEnergyConsumption(item.type)">{{ item.label }}</span>
            </div>
            <div class="btnList">
              <EnumBtn @enumClick="enumClick_2"></EnumBtn>
            </div>
          </div>
          <div class="chartContent">
            <LineChart v-show="lineDataList.length" :dataList="lineDataList" :seriesName="lineSeriesName"></LineChart>
            <span class="noData" v-show="!lineDataList.length">暂无能耗数据</span>
          </div>
        </div>
      </div>
    </template>
  </Container>
</template>

<script>
import Container from "@/components/Container"
import PieChart from "@/components/Echart/pie.vue"
import LineChart from "@/components/Echart/line.vue"
import dataQueryApi from "@/api/dataQuery"
import { formatDate } from "@/utils/filterTime"

export default {
  name: 'EnergyOverview',
  components: {
    PieChart,
    LineChart,
    Container
  },
  data() {
    return {
      realTimeData: [],
      lineDataList: [],
      pieDataList: [],
      energyId_1: '',
      energyId_2: '',
      pieSeriesName: '',
      lineSeriesName: '',
      type: 1,
      typeList: [
        {
          type: 1,
          label: '当日'
        },
        {
          type: 2,
          label: '当月'
        },
        {
          type: 3,
          label: '当年'
        }
      ]
    }
  },
  mounted() {
    this.initData()
  },

  methods: {
    initData() {
      dataQueryApi.energyOverview().then(res => {
        this.realTimeData = res.data || []
        this.realTimeData.map(e => {
          let { energyName, energyUnit, icon } = e.energy || {}
          e.dataImage = icon || require('@/assets/icon/dian.png');
          e.dataList = [
            { value: e.yearConsumption, unit: energyUnit, label: `年总用${energyName}量`, time: this.setTime(e.yearTime) },
            { value: e.thisMonthConsumption, unit: energyUnit, label: `本月用${energyName}`, time: this.setTime(e.thisMonthTime) },
            { value: e.lastMonthconsumption, unit: energyUnit, label: `上月用${energyName}`, time: this.setTime(e.lastMonthTime) },
            { value: e.todayConsumption, unit: energyUnit, label: `今日用${energyName}`, time: formatDate(new Date(), true) },
            { value: e.yesterdayConsumption, unit: energyUnit, label: `昨日用${energyName}`, time: formatDate(new Date(), true, -1) }
          ]
        })
      })
    },
    monthConsumption(params) {
      this.pieDataList = [];
      dataQueryApi.monthConsumption(params).then(res => {
        this.pieDataList = (res.data || []).map(e => {
          return {
            name: e.areaName,
            value: e.consumption
          }
        })
      })
    },
    energyConsumptionTrendAnalysis(params) {
      this.lineDataList = [];
      if (params.energyId) {
        dataQueryApi.energyConsumptionTrendAnalysis(params).then(res => {
          this.lineDataList = (res.data || []).map(e => {
            return {
              time: params.type == 1 ? e.date + ':00' : e.date,
              value: e.consumption || 0
            }
          })
        })
      }
    },
    setTime(timeStr) {
      let timeList = timeStr.split('至');
      timeList = timeList.map(e => {
        return formatDate(new Date(e), true)
      })
      console.log(timeList)
      return timeList.join('至')
    },
    enumClick_1(e) {
      this.energyId_1 = e.energyId;
      this.pieSeriesName = `设备能耗(${e.energyUnit})`
      this.monthConsumption({
        energyId: this.energyId_1,
        organizationNo: sessionStorage.organizationNo
      })
    },
    enumClick_2(e) {
      this.energyId_2 = e.energyId
      this.lineSeriesName = `设备能耗(${e.energyUnit})`
      this.energyConsumptionTrendAnalysis({
        energyId: this.energyId_2,
        type: this.type,
        organizationNo: sessionStorage.organizationNo
      })
    },
    getEnergyConsumption(type) {
      this.type = type
      this.energyConsumptionTrendAnalysis({
        energyId: this.energyId_2,
        type: type,
        organizationNo: sessionStorage.organizationNo
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.realTimeData {
  margin-bottom: 10px;
  min-height: 286px;

  .data {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    padding: 10px;
    padding-bottom: 0;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    &:nth-child(even) {
      .dataList {
        .info {
          background-color: #D9EEFF;
        }
      }
    }

    .dataImage {
      width: 70px;
      height: 70px;
      margin-left: 34px;
      margin-right: 24px;
      border-radius: 5px;
      margin-bottom: 10px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .dataList {
      width: calc(100% - 98px);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;

      .info {
        width: calc(100% / 5 - 12px);
        min-width: 200px;
        background-color: #E6EBFF;
        padding: 15px;
        margin-left: 12px;
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 28px;
        border-radius: 5px;
        color: #4E4E4E;

        .value {
          font-size: 26px;
          font-weight: bold;
        }

        .label {
          font-weight: 600;
        }
      }
    }
  }
}

.chart {
  height: calc(100% - 300px);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;

  .pieChart,
  .lineChart {
    background-color: #ffffff;
    padding: 15px;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;

      .typeList {
        .type {
          margin: 0 10px;
          cursor: pointer;
          background-color: #ffffff;
          padding: 2px 10px;
          border-radius: 4px;
          color: #6176D0;
          border: 1px solid #6176D0;
        }

        .active_type {
          color: #ffffff;
          background-color: #6176D0;
        }
      }
    }

    .chartContent {
      width: 100%;
      height: calc(100% - 30px);
    }
  }

  .pieChart {
    width: 500px;
    height: 100%;
  }

  .lineChart {
    width: calc(100% - 510px);
    height: 100%;
    margin-left: 10px;
  }
}
</style>
